{extend name="base" /}
<!-- page specific plugin styles -->
{block name="inline-styles"}
<style>
.swiper-container {
	width: 100%;
} 

.swiper-container .swiper-slide {
	display: block;
	width: 100%;
	height:200px;
	background-color: #000;
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}
</style>
{/block}
<!-- PAGE CONTENT BEGINS -->
{block name="content"}
<div class="page js_show">
    <div class="page__bd" style="height: 100%">
        <div class="weui-tab">
            <div class="weui-tab__panel" id="formData">
            	<div class="weui-panel">
					<div class="swiper-container">
						<div class="swiper-wrapper">
						   {foreach $pics as $pic}
                            <div class="swiper-slide">
                                <img src="{$pic}" alt="" style="width: 100%;height:200px;">
                            </div>
                            {/foreach}
						</div>
						<!-- Add Pagination -->
	    				<div class="swiper-pagination"></div>
					</div>
				</div>

				<div class="weui-panel">
					<div class="weui-panel__bd">
						<div class="weui-media-box">
							<div class="weui-media-box__bd">
								<h4 class="weui-media-box__title" id="goodsname"></h4>
								<div class="weui-flex">
									<div class="weui-flex__item">
										<div class="weui-wepay-color-orange">￥<span id="price">0</span></div>
									</div>
									<div class="weui-flex__item" style="text-align: right">
										<div class="weui-media-box__desc">库存：<span id="stock">12345</span>件</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="weui-panel weui-panel--attr">
					<div class="weui-panel__bd">
					   {foreach $goods_specs as $vo}
					   <div class="weui-cell weui-cell_access">
                            <div class="weui-cell__hd">{$vo['name']}</div>
                            <div class="weui-cell__bd">
                                {foreach $vo.values as $subVal}
                                <button class="weui-btn weui-btn_mini weui-btn_default" data-id="{$subVal.id}">{$subVal.item}</button>
                                {/foreach}
                            </div>
                        </div>
					   {/foreach}
						<div class="weui-cell weui-cell_access">
							<div class="weui-cell__hd">数量</div>
							<div class="weui-cell__bd">
								<div class="weui-count">
									<a class="weui-count__btn weui-count__decrease"></a>
									<input class="weui-count__number" type="number" value="1" />
									<a class="weui-count__btn weui-count__increase"></a>
			                    </div>
							</div>
						</div>
					</div>
				</div>

				<div class="weui-panel">
					<div class="weui-panel__hd" style="text-align: center;color: #333;font-weight: bold;">产品详情</div>
					<div class="weui-panel__bd">
						<article class="weui-article">
						  <section>
				            <p id='detail'></p>
				          </section>
				        </article>
					</div>
				</div>
            </div>
            <div class="weui-tabbar">
                <div class="weui-tabbar__item" style="padding-top: 0">
                    <a class="weui-btn weui-btn_warn weui-btn_disabled" href="javascript:;" id="showToast" style="border-radius: 0">立即购买</a>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
<!-- PAGE CONTENT ENDS -->
<!-- inline scripts related to this page -->
{block name="related-scripts"}
<script src="{$Think.const.STATIC_DOMAIN}/static/js/swiper.min.js"></script>
<script type="text/javascript">
	var MAX = 99, MIN = 1;
	if({$pics_count} >1){
		var _loop =true;
	}else{
		var _loop =false;
	}

	$(".swiper-container").swiper({
		loop: _loop,
		pagination: '.swiper-pagination',
		autoplay: 3000
	});
	var attr = {};
	var key ='';
    $.ajax({
        url: '/api/v1/goods/homefind',
        type: 'POST',
        dataType: 'json',
        data:{
        	id: GetQueryString("id")
        }
    })
    .done(function(json) {
        console.log("success");
        initPageHTML("formData",json.data);
        countNmber(json.data.stock);
        attr=json.data.attr_price;
        if(json.data.need_attr){
        	$("#showToast").addClass('weui-btn_disabled');
        }else{
        	$("#showToast").removeClass('weui-btn_disabled');
        }
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    function countNmber(MAX) {
    	// body...
    	$(".weui-count__decrease").unbind("click");
    	$(".weui-count__increase").unbind("click");
    	$('.weui-count__number').val(1);
		$('.weui-count__decrease').click(function (e) {
			var $input = $(e.currentTarget).parent().find('.weui-count__number');
			var number = parseInt($input.val() || "0") - 1
			if (number < MIN) number = MIN;
			$input.val(number)
		})
		$('.weui-count__increase').click(function (e) {
			var $input = $(e.currentTarget).parent().find('.weui-count__number');
			var number = parseInt($input.val() || "0") + 1
			if (number > MAX) number = MAX;
			$input.val(number)
		})
    }

	$("#showToast").click(function(argument) {
		// body...
		if($(this).hasClass('weui-btn_disabled')){
			return false;
		}
		if(key==""){
			window.location.href="/mobile/index/order_submit?goodsid="+GetQueryString("id")+ "&courier_num="+$(".weui-count__number").val()+"&price="+$("#price").text();
		}else{
			window.location.href="/mobile/index/order_submit?goodsid="+GetQueryString("id")+ "&courier_num="+$(".weui-count__number").val()+"&price="+$("#price").text() + '&key='+key;
		}
	});


	// 产品规格
	$(".weui-btn_mini").click(function(){
		$(this).addClass('weui-btn_warn').removeClass('weui-btn_default').siblings().removeClass('weui-btn_warn').addClass('weui-btn_default');
		$(".weui-panel--attr .weui-btn_warn").each(function(index) {
			// body...
			_id = $(this).data('id');
			if(index==0){
				key = _id;
			}else{
				key = key +'_'+ _id;
			}
		});
		// console.log(attr[key].key);
		if(attr[key]!=undefined && attr[key].key == key){
			$("#showToast").removeClass('weui-btn_disabled');
			$("#price").text(attr[key].price);
			$("#stock").text(attr[key].store_count);
			countNmber(attr[key].store_count);
		}else{
			$("#stock").text(0);
			$("#showToast").addClass('weui-btn_disabled');
		}
	})
</script>
{/block}